<script setup lang="ts">
import KSection from "@/views/domain/kubeHud/views/components/k-section/index.vue";
import koContainerEdit from "./ko-container-edit.vue";
import { Container, ObjectMeta } from "@/views/domain/kubeHud/api/k8s";
import { WorkloadEditContainerType } from "./types";
import { ref } from "vue";

type Prop = {
  readonly?: boolean;
  type?: WorkloadEditContainerType;
  createTrigger?: boolean;
};

const props = defineProps<Prop>();
const emits = defineEmits(["shouldCreate", "edit", "delete"]);
const containerType = ref<WorkloadEditContainerType>(props.type);

const editModel = defineModel<Container>("container");

const typeSelectDialogVisible = ref(false);

const onShouldCreate = () => {
  if (props.type) {
    onShouldCreateInType(props.type);
  } else {
    typeSelectDialogVisible.value = true;
  }
};

const onShouldCreateInType = (t: WorkloadEditContainerType) => {
  containerType.value = t;

  // editModel.value = {};
  typeSelectDialogVisible.value = false;
  emits("shouldCreate", t);
  // editDialogVisible.value = true;
};

const onShouldEdit = () => {
  emits("edit", editModel.value);
};

const onShouldDelete = () => {
  emits("delete", editModel.value);
};
</script>

<template>
  <div class="container-row-wrapper">
    <div v-if="createTrigger" class="create-trigger" @click="onShouldCreate">
      <el-empty
        :image-size="40"
        description="新建容器"
        style="--el-empty-padding: 0"
      />

      <el-dialog
        v-model="typeSelectDialogVisible"
        append-to-body
        title="选择容器类型"
        :before-close="() => (typeSelectDialogVisible = false)"
      >
        <div class="container-type-wrapper">
          <div
            class="container-block standard"
            @click="onShouldCreateInType(WorkloadEditContainerType.Standard)"
          >
            <span>工作容器</span>
          </div>
          <div
            class="container-block init"
            @click="onShouldCreateInType(WorkloadEditContainerType.Init)"
          >
            <span>初始化容器</span>
          </div>
        </div>
      </el-dialog>
    </div>
    <div v-else class="container-row">
      <el-icon size="32"><Box /></el-icon>
      <div class="head-row-col">
        <span>{{ editModel.name }}</span>
        <div>{{ editModel.image }}</div>
      </div>
      <div class="flex flex-1 justify-center gap-2">
        <el-text v-if="!editModel.resources">无资源限制</el-text>
        <div v-else class="flex flex-col">
          <el-text>
            CPU {{ editModel.resources?.requests?.cpu ?? "-" }}/{{
              editModel.resources?.limits?.cpu ?? "-"
            }}
          </el-text>
          <el-text>
            内存 {{ editModel.resources?.requests?.memory ?? "-" }}/{{
              editModel.resources?.limits?.memory ?? "-"
            }}
          </el-text>
        </div>
      </div>
      <div class="row-action">
        <el-button circle icon="Edit" @click="onShouldEdit" />
        <el-button circle icon="Delete" @click="onShouldDelete" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container-row-wrapper {
  display: flex;
  gap: 10px;
  border: var(--el-border);
  border-radius: 10px;
  transition: all 0.3s;
  margin-bottom: 10px;

  .create-trigger {
    width: 100%;
    padding: 10px;
  }

  > :hover {
    box-shadow: var(--el-box-shadow);
    cursor: pointer;
  }
}

.container-type-wrapper {
  display: flex;
  height: 15rem;
  flex-wrap: wrap;
  gap: 10px;
  font-size: large;
  font-weight: bold;
  color: white;

  .container-block {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin: 10px;
    transition: all 0.3s;
    box-sizing: border-box;
  }
  .container-block:hover {
    box-shadow: var(--el-box-shadow);
    margin: 0;
    font-size: x-large;
  }

  .standard {
    background-color: var(--el-color-primary);
  }

  .init {
    background-color: var(--el-color-success);
  }
}

.container-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 20px;
  width: 100%;

  .row-action {
    // display: none;
    opacity: 0;
    opacity: 0;
  }

  &:hover .row-action {
    opacity: 1;
    // display: flex;
  }
}

.head-row-col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  > span {
    min-height: 20px;
    font-size: 14px;
    font-weight: bold;
  }
  > div {
    font-size: 12px;
    color: var(--el-text-color-secondary);
  }
}
</style>
